<template>
    <div class="home">
        <!-- 第一模块 -->
        <div class="OneModule">
            <div class="topModlue">
                <div class="moduleLeft">
                    <img src="@/assets/images/projectData.png" alt="" />
                    项目数据
                </div>
                <div class="moduleRight">
                    <div class="moduleRightItem">
                        <div class="moduleRightItemLable">地区</div>
                        <a-select ref="select" v-model:value="address" style="width: 240px; height: 32px"> </a-select>
                    </div>

                    <div class="moduleRightItem">
                        <div class="moduleRightItemLable">资质分类</div>
                        <a-select ref="select" v-model:value="certification" style="width: 240px; height: 32px">
                        </a-select>
                    </div>

                    <div class="moduleRightItem">
                        <div class="moduleRightItemLable">日期</div>
                        <a-range-picker
                            v-model:value="datePicker"
                            style="width: 240px; height: 32px"
                            :placeholder="['开始日期', '结束日期']" />
                    </div>
                </div>
            </div>

            <div class="bottomModule">
                <div class="bottomModuleItem" v-for="item in oneModuleConfig" :key="item.icon">
                    <img :src="item.icon" alt="" />
                    <div class="item_title">{{ item.title }}</div>
                    <div class="item_number">{{ item.number }}</div>
                </div>
            </div>
        </div>

        <div class="TwoModule">
            <div class="TwoModuleLeft">
                <div class="TwoModuleLeftTitle">
                    <img src="@/assets/images/monitoring.png" alt="" />
                    实时监控（近6月报告数据）
                </div>

                <img src="@/assets/images/home_map.png" alt="" class="TwoModuleLeftChart" />
            </div>

            <div class="TwoModuleRight">
                <div class="TwoModuleRightItem">
                    <div class="TwoModuleRightItemTitle">
                        <img src="@/assets/images/earlyWarning.png" alt="" />
                        管理预警
                    </div>

                    <div class="TwoModuleRightItemOneBox">
                        <div class="TwoModuleRightItemOneBoxItem">
                            <div class="TwoModuleRightItemOneBoxItemLeft">
                                <img src="@/assets/images/TwoModuleRightItemOneBoxItemLeftIcon.png" alt="" />
                                设备超期
                            </div>

                            <div class="TwoModuleRightItemOneBoxItemRight">
                                <div class="num">829</div>
                                台
                            </div>
                        </div>

                        <div class="TwoModuleRightItemOneBoxItem">
                            <div class="TwoModuleRightItemOneBoxItemLeft">
                                <img src="@/assets/images/TwoModuleRightItemOneBoxItemLeftIcon.png" alt="" />
                                报告修改异常
                            </div>

                            <div class="TwoModuleRightItemOneBoxItemRight">
                                <div class="num">829</div>
                                台
                            </div>
                        </div>

                        <div class="TwoModuleRightItemOneBoxItem">
                            <div class="TwoModuleRightItemOneBoxItemLeft">
                                <img src="@/assets/images/TwoModuleRightItemOneBoxItemLeftIcon.png" alt="" />
                                数据上传不及时
                            </div>

                            <div class="TwoModuleRightItemOneBoxItemRight">
                                <div class="num">829</div>
                                台
                            </div>
                        </div>
                    </div>
                </div>

                <div class="TwoModuleRightItem">
                    <div class="TwoModuleRightItemTitle">
                        <img src="@/assets/images/information.png" alt="" />
                        消息通知
                    </div>

                    <div class="TwoModuleRightItemTwoBox">
                        <div class="TwoModuleRightItemTwoBoxItem">
                            <div class="TwoModuleRightItemTwoBoxItemLeft">
                                <div class="TwoModuleRightItemTwoBoxItemLeftTip">重要通知</div>
                                网站功能更新
                            </div>

                            <div class="TwoModuleRightItemTwoBoxItemRight">2023年10月1日12点-14点网站维护</div>
                        </div>

                        <div class="TwoModuleRightItemTwoBoxItem">
                            <div class="TwoModuleRightItemTwoBoxItemLeft">
                                <div class="TwoModuleRightItemTwoBoxItemLeftTip">重要通知</div>
                                网站功能更新
                            </div>

                            <div class="TwoModuleRightItemTwoBoxItemRight">2023年10月1日12点-14点网站维护</div>
                        </div>
                    </div>
                </div>

                <div class="TwoModuleRightItem">
                    <div class="TwoModuleRightItemTitle">
                        <img src="@/assets/images/standard.png" alt="" />
                        最新标准
                    </div>

                    <div class="TwoModuleRightItemThreeBox">
                        <div class="TwoModuleRightItemThreeBoxItem">
                            <div class="TwoModuleRightItemThreeBoxItemLeft">
                                关于《混凝土实心砖》GB/T 21144-2023 标准更新的通知
                            </div>

                            <div class="TwoModuleRightItemThreeBoxItemRight">2002年04月14日</div>
                        </div>

                        <div class="TwoModuleRightItemThreeBoxItem">
                            <div class="TwoModuleRightItemThreeBoxItemLeft">
                                关于《混凝土实心砖》GB/T 21144-2023 标准更新的通知
                            </div>

                            <div class="TwoModuleRightItemThreeBoxItemRight">2002年04月14日</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';

    const address = ref('吉林省/全部');

    const certification = ref('全部');

    const datePicker = ref();

    const oneModuleConfig = [
        {
            icon: new URL('../../assets/images/home_OneModule_icon1.png', import.meta.url),
            title: '机构数量',
            number: 389
        },
        {
            icon: new URL('../../assets/images/home_OneModule_icon2.png', import.meta.url),
            title: '全部试验',
            number: 8500
        },
        {
            icon: new URL('../../assets/images/home_OneModule_icon3.png', import.meta.url),
            title: '合格',
            number: 9655
        },
        {
            icon: new URL('../../assets/images/home_OneModule_icon4.png', import.meta.url),
            title: '不合格',
            number: 2387
        },
        {
            icon: new URL('../../assets/images/home_OneModule_icon5.png', import.meta.url),
            title: '未试验',
            number: 8663
        },
        {
            icon: new URL('../../assets/images/home_OneModule_icon6.png', import.meta.url),
            title: '作废',
            number: 9549
        },
        {
            icon: new URL('../../assets/images/home_OneModule_icon7.png', import.meta.url),
            title: '数据修改',
            number: 7789
        },
        {
            icon: new URL('../../assets/images/home_OneModule_icon8.png', import.meta.url),
            title: '手工录入',
            number: 2036
        }
    ];
</script>

<style lang="scss" scoped>
    .home {
        padding: min(30px, 1.56vw);
        width: 100%;
        height: 100%;
        overflow: auto;

        .OneModule {
            width: 100%;
            background: #ffffff;
            border-radius: 12px;
            padding: min(29px, 1.51vw) min(30px, 1.56vw) min(16px, 0.83vw);
            margin-bottom: min(24px, 1.25vw);

            .topModlue {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: min(33px, 1.72vw);
                flex-wrap: wrap;
                gap: min(20px, 1.04vw);

                .moduleLeft {
                    display: flex;
                    align-items: center;
                    font-size: min(24px, 1.25vw);
                    color: #333333;
                    font-weight: bold;

                    img {
                        width: min(22px, 1.15vw);
                        height: min(22px, 1.15vw);
                        margin-right: min(8px, 0.42vw);
                    }
                }

                .moduleRight {
                    display: flex;
                    gap: min(48px, 2.5vw);
                    flex-wrap: wrap;

                    .moduleRightItem {
                        display: flex;
                        align-items: center;

                        .moduleRightItemLable {
                            margin-right: min(12px, 0.63vw);
                            font-size: min(18px, 0.94vw);
                            white-space: nowrap;
                        }
                    }
                }
            }

            .bottomModule {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: min(20px, 1.04vw);

                .bottomModuleItem {
                    user-select: none;
                    flex: 1;
                    min-width: min(200px, 10.42vw);
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    img {
                        width: min(42px, 2.19vw);
                        height: min(42px, 2.19vw);
                    }

                    .item_title {
                        margin-top: min(20px, 1.04vw);
                        margin-bottom: min(10px, 0.52vw);
                        font-size: min(18px, 0.94vw);
                        color: #666666;
                        line-height: min(24px, 1.25vw);
                    }

                    .item_number {
                        font-weight: bold;
                        font-size: min(48px, 2.5vw);
                        color: #333333;
                    }
                }
            }
        }

        .TwoModule {
            display: flex;
            align-items: flex-start;
            gap: min(24px, 1.25vw);
            flex-wrap: wrap;

            .TwoModuleLeft {
                background: #ffffff;
                border-radius: 12px;
                width: min(64%, calc(100% - min(24px, 1.25vw)));
                padding: min(30px, 1.56vw);

                .TwoModuleLeftTitle {
                    display: flex;
                    align-items: center;
                    font-size: min(24px, 1.25vw);
                    color: #333333;
                    line-height: min(32px, 1.67vw);
                    margin-bottom: min(28px, 1.46vw);

                    img {
                        width: min(22px, 1.15vw);
                        height: min(22px, 1.15vw);
                        margin-right: min(8px, 0.42vw);
                    }
                }

                .TwoModuleLeftChart {
                    width: 100%;
                    height: min(537px, 27.97vw);
                    object-fit: cover;
                }
            }

            .TwoModuleRight {
                flex: 1;
                min-width: min(400px, 20.83vw);
                display: flex;
                flex-direction: column;
                gap: min(24px, 1.25vw);

                .TwoModuleRightItem {
                    padding: min(30px, 1.56vw);
                    width: 100%;
                    background: #ffffff;
                    border-radius: 12px;

                    .TwoModuleRightItemTitle {
                        display: flex;
                        align-items: center;
                        font-size: min(24px, 1.25vw);
                        line-height: min(32px, 1.67vw);
                        color: #333333;
                        margin-bottom: min(18px, 0.94vw);

                        img {
                            width: min(22px, 1.15vw);
                            height: min(22px, 1.15vw);
                            margin-right: min(8px, 0.42vw);
                        }
                    }

                    .TwoModuleRightItemOneBox {
                        display: grid;
                        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                        gap: min(18px, 0.94vw);

                        .TwoModuleRightItemOneBoxItem {
                            height: min(60px, 3.13vw);
                            background: #f7f8fa;
                            border-radius: 6px;
                            display: flex;
                            justify-content: space-between;
                            padding: min(19px, 0.99vw) min(16px, 0.83vw);

                            .TwoModuleRightItemOneBoxItemLeft {
                                display: flex;
                                align-items: center;
                                font-size: min(16px, 0.83vw);
                                color: #333333;

                                img {
                                    margin-right: min(6px, 0.31vw);
                                    width: min(20px, 1.04vw);
                                    height: min(20px, 1.04vw);
                                }
                            }

                            .TwoModuleRightItemOneBoxItemRight {
                                display: flex;
                                align-items: center;
                                color: #1464d5;

                                .num {
                                    margin-right: min(2px, 0.1vw);
                                    font-size: min(24px, 1.25vw);
                                    font-weight: bold;
                                }
                            }
                        }
                    }

                    .TwoModuleRightItemTwoBox {
                        display: flex;
                        flex-direction: column;
                        gap: min(22px, 1.15vw);

                        .TwoModuleRightItemTwoBoxItem {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            flex-wrap: wrap;
                            gap: min(10px, 0.52vw);

                            .TwoModuleRightItemTwoBoxItemLeft {
                                display: flex;
                                align-items: center;

                                .TwoModuleRightItemTwoBoxItemLeftTip {
                                    width: min(64px, 3.33vw);
                                    height: min(24px, 1.25vw);
                                    background: rgba(240, 0, 0, 0.1);
                                    border-radius: 2px;
                                    color: #f00000;
                                    font-size: min(12px, 0.63vw);
                                    line-height: min(24px, 1.25vw);
                                    text-align: center;
                                    margin-right: min(8px, 0.42vw);
                                }
                            }

                            .TwoModuleRightItemTwoBoxItemRight {
                                font-weight: 400;
                                font-size: min(16px, 0.83vw);
                                color: #666666;
                            }
                        }
                    }

                    .TwoModuleRightItemThreeBox {
                        display: flex;
                        flex-direction: column;
                        gap: min(22px, 1.15vw);

                        .TwoModuleRightItemThreeBoxItem {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            flex-wrap: wrap;
                            gap: min(10px, 0.52vw);

                            .TwoModuleRightItemThreeBoxItemLeft {
                                display: flex;
                                align-items: center;
                                font-size: min(14px, 0.73vw);
                            }

                            .TwoModuleRightItemThreeBoxItemRight {
                                font-weight: 400;
                                font-size: min(16px, 0.83vw);
                                color: #666666;
                            }
                        }
                    }
                }
            }
        }

        @media screen and (max-width: 1440px) {
            .TwoModule {
                .TwoModuleLeft {
                    width: 100%;
                }
            }
        }

        @media screen and (max-width: 1280px) {
            .OneModule {
                .bottomModule {
                    .bottomModuleItem {
                        min-width: min(180px, 14.06vw);
                    }
                }
            }
        }
    }
</style>
